//MessageBox.js
import React, { useState } from "react";

const MessageBox = ({ content, onClose }) => {
    const [isMinimized, setIsMinimized] = useState(false);

    const handleMinimize = () => {
        setIsMinimized(!isMinimized);
    };

    return (
        <div style={styles.container(isMinimized)}>
            {!isMinimized && (
                <>
                    <div style={styles.header}>
                        <div style={styles.title}>消息</div>
                        <div style={styles.controls}>
                            <button
                                style={styles.controlButton}
                                onClick={handleMinimize}
                            >
                                {isMinimized ? '恢复' : '最小化'}
                            </button>
                            <button
                                style={styles.controlButton}
                                onClick={onClose}
                            >
                                关闭
                            </button>
                        </div>
                    </div>
                    <div style={styles.content}>
                        {content}
                    </div>
                </>
            )}
            {isMinimized && (
                <div
                    style={styles.minimized}
                    onClick={handleMinimize}
                >
                    <span style={styles.minimizedText}>消息</span>
                </div>
            )}
        </div>
    );
};

const styles = {
    container: (isMinimized) => ({
        position: 'fixed',
        bottom: 20,
        right: 20,
        width: isMinimized ? 60 : 300,
        height: isMinimized ? 30 : 200,
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderRadius: '5px',
        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
        zIndex: 1000,
        overflow: 'hidden',
        transition: 'all 0.3s ease'
    }),
    header: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '8px 12px',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderBottom: '1px solid #eee'
    },
    title: {
        fontWeight: 'bold'
    },
    controls: {
        display: 'flex',
        gap: '8px'
    },
    controlButton: {
        padding: '4px 8px',
        backgroundColor: 'rgba(255, 255, 255, 0.7)',
        border: '1px solid #ddd',
        borderRadius: '3px',
        cursor: 'pointer',
        '&:hover': {
            backgroundColor: 'rgba(255, 255, 255, 0.9)'
        }
    },
    content: {
        padding: '12px',
        height: 'calc(100% - 40px)',
        overflowY: 'auto'
    },
    minimized: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        cursor: 'pointer',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        '&:hover': {
            backgroundColor: 'rgba(255, 255, 255, 1)'
        }
    },
    minimizedText: {
        fontSize: '12px',
        color: '#666'
    }
};

export default MessageBox;